<template>
  <div id="nav">
    <el-breadcrumb :separator-icon="ArrowRight" v-if="isshow">
      <el-breadcrumb-item>{{active.menu.title}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{active.content.item}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{active.activePaper}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import {ArrowRight} from '@element-plus/icons-vue'
import {useStore} from "vuex";
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
export default {
  name: "manageNavigator",
  components: {},
  setup(){
    const store = useStore()
    const router = useRouter()
    const {proxy} = getCurrentInstance()
    let isshow = ref(false)
    let active = reactive({
      menu: {},
      content: {},
      activePaper: null
    })
    onMounted(()=>{
      isshow.value = false
      proxy.$bus.on('sendIndex',(data)=>{
        active.menu = store.state.menu[data.menuIndex]
        active.content = store.state.menu[data.menuIndex].content[data.contentIndex]
        isshow.value = true
      })
      proxy.$bus.on('sendData',(data)=>{
        active.activePaper = data
      })
    })
    onBeforeUnmount(()=>{
      proxy.$bus.off('sendIndex')//销毁
      proxy.$bus.off('sendData')//销毁
    })
    function isClickItem(index){
      return router.currentRoute.value.fullPath === active.value.content[index].path
    }
    return{
      isshow,
      active,
      ArrowRight,
      isClickItem
    }
  }
}
</script>

<style scoped>
#nav .el-breadcrumb {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}
#nav .el-breadcrumb .title{
  font-weight: bold;
}
</style>